<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/style/css/quiz-app.css" />
  </head>
  <body>
    <main>
      <div class="content">
        <div class="question"></div>
        <div class="options"></div>
      </div>
      <div class="submit">Submit</div>
    </main>
  </body>
  <script>
    const questions = [
      {
        question: "Which language runs in a web browser?",
        options: ["Java", "C", "Python", "JavaScript"],
        answer: "JavaScript",
      },
      {
        question: "What does CSS stand for?",
        options: [
          "Central Style Sheets",
          "Cascading Style Sheets",
          "Cascading Simple Sheets",
          "Cars SUVs Sailboats",
        ],
        answer: "Cascading Style Sheets",
      },
      {
        question: "What does HTML stand for?",
        options: [
          "Hypertext Markup Language",
          "Hypertext Markdown Language",
          "Hyperloop Machine Language",
          "Helicopters Terminals Motorboats Lamborginis",
        ],
        answer: "Hypertext Markup Language",
      },
      {
        question: "What year was JavaScript launched?",
        options: ["1996", "1995", "1994", "none of the above"],
        answer: "1995",
      },
    ];
    let length = questions.length;
    let current = 0;
    let result = Array.from({ length });
    let submitElement = document.getElementsByClassName("submit")[0];

    function calcScore() {
      let score = 0;
      questions.forEach((item, index) => {
        if (item.answer == result[index]) {
          score += 1;
        }
      });
      return score;
    }

    function reload() {
      submitElement.innerHTML = "Submit";
      result.fill(0);
      current = 0;
      initPage(current);
    }

    function answerResult() {
      const questionElement = document.getElementsByClassName("question")[0];
      const optionsElement = document.getElementsByClassName("options")[0];
      optionsElement.parentNode.removeChild(optionsElement);
      questionElement.innerHTML = `You answered ${calcScore()}/${length} questions correctly`;
      submitElement.innerHTML = "Reload";
    }

    function initPage(index) {
      let selectQuestion = questions[index];
      let questionElement = document.getElementsByClassName("question")[0];
      let optionsElementList = document.getElementsByClassName("options");
      let optionsElement;
      questionElement.innerHTML = selectQuestion.question;
      if (optionsElementList.length == 0) {
        const parentContent = document.getElementsByClassName("content")[0];
        optionsElement = document.createElement("div");
        optionsElement.setAttribute("class", "options");
        parentContent.appendChild(optionsElement);
      } else {
        optionsElement = optionsElementList[0];
      }

      if (optionsElement.firstElementChild) {
        const childs = optionsElement.children;
        console.log(childs);
        for (let [index, element] of Array.from(childs).entries()) {
          const input = element.querySelector("input");
          const label = element.querySelector("label");
          let option = selectQuestion.options[index];
          input.setAttribute("id", option);
          input.setAttribute("value", option);
          input.removeAttribute("checked");
          label.setAttribute("for", option);
          label.innerHTML = option;
        }
        return;
      }
      for (let option of selectQuestion.options) {
        const newRadio = document.createElement("div");
        const newInput = document.createElement("input");
        const newLabel = document.createElement("label");
        newRadio.className = "radio";
        newInput.setAttribute("type", "radio");
        newInput.setAttribute("id", option);
        newInput.setAttribute("value", option);
        newInput.setAttribute("name", index);

        newLabel.setAttribute("for", option);

        newLabel.innerHTML = option;
        newLabel.style.marginLeft = "10px";
        newRadio.appendChild(newInput);
        newRadio.appendChild(newLabel);
        optionsElement.appendChild(newRadio);
      }
    }
    initPage(current);
    submitElement.addEventListener("click", function () {
      if (submitElement.innerHTML == "Reload") {
        reload();
        return;
      }
      let isCheck = false;
      let select = "";
      let inputElements = document.getElementsByTagName("input");
      for (let input of inputElements) {
        if (input.checked) {
          isCheck = true;
          select = input.value;
          input.checked = false;
        }
      }
      console.log("ischeck: ", isCheck);
      console.log("select value: ", select);
      result[current] = select;
      console.log("result: ", result);
      if (!isCheck) {
        return;
      }
      console.log("current: ", current);
      if (current + 1 < questions.length) {
        current += 1;
        initPage(current);
      } else {
        console.log("res", result);
        answerResult();
      }
    });
  </script>
</html>
